// import products from './products.js';
/**
 * 购物车
 * 存储购物车商品信息的数组，每个元素是一个对象，包含商品名称和价格
 */
// 初始化购物车数据（Initialize shopping cart data）
// 从localStorage加载已有数据，若无数据则初始化为空数组
// Load existing data from localStorage, initialize to empty array if none exists
let cart = JSON.parse(localStorage.getItem('cart')) || [];

/**
 * 将指定商品添加到购物车（Add item to shopping cart）
 * @param {string} name - 商品名称（Product name）
 * @param {number} price - 商品价格（Product price）
 * 功能说明（Functionality）:
 * 1. 参数类型校验：确保名称是字符串，价格是数字
 *    Parameter validation: Ensure name is string and price is number
 * 2. 数据持久化：更新内存中的购物车数据并同步到localStorage
 *    Data persistence: Update in-memory cart and sync to localStorage
 * 3. 条件渲染：仅在购物车页面执行DOM更新操作
 *    Conditional rendering: Only update DOM on cart page
 */
function addToCart(name, price) {
    // 严格参数校验（Strict parameter validation）
    if (typeof name !== 'string' || typeof price !== 'number') {
        console.error('无效的参数类型 / Invalid parameter types');
        return;
    }

    // 更新内存中的购物车数据（Update in-memory cart）
    cart.push({ name, price });
    
    // 数据持久化到localStorage（Persist to localStorage）
    // 使用JSON序列化保证数据完整性（JSON serialization ensures data integrity）
    localStorage.setItem('cart', JSON.stringify(cart));
    
    // 条件DOM更新：仅在购物车页面更新显示
    // Conditional DOM update: Only when on cart page
    if (document.getElementById('cart-items')) {
        updateCart();
    }
}

/**
 * 更新购物车显示（Update cart display）
 * 核心逻辑（Core functionality）:
 * 1. 数据同步：从localStorage重新加载最新数据
 *    Data synchronization: Reload latest from localStorage
 * 2. 性能优化：使用文档片段减少DOM操作次数
 *    Performance: Use document fragment to minimize DOM operations
 * 3. 安全渲染：使用escapeHtml防止XSS攻击
 *    Security: escapeHtml prevents XSS vulnerabilities
 */
function updateCart() {
    // 从存储同步最新数据（Synchronize data from storage）
    cart = JSON.parse(localStorage.getItem('cart')) || [];
    
    // DOM元素缓存（DOM element caching）
    const cartItems = document.getElementById('cart-items');
    const totalPriceElement = document.getElementById('total-price');
    
    // 防御性编程：确保元素存在（Defensive programming: Ensure elements exist）
    if (!cartItems || !totalPriceElement) {
        console.warn('购物车元素未找到 / Cart elements not found');
        return;
    }
    
    // 创建文档片段减少重绘（Create document fragment to reduce reflows）
    const fragment = document.createDocumentFragment();
    let total = 0;

    // 清空现有内容（Clear existing content）
    cartItems.innerHTML = '';

    // 构建新的购物车项（Build new cart items）
    cart.forEach((item, index) => {
        const div = document.createElement('div');
        div.className = 'cart-item';
        div.textContent = `${escapeHtml(item.name)}: ¥${item.price.toFixed(2)}`;
        
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'X';
        deleteBtn.className = 'delete-btn';
        deleteBtn.dataset.index = index;
        div.appendChild(deleteBtn);
        
        // 使用文档片段批量添加（Batch append via fragment）
        fragment.appendChild(div);
        total += item.price;
    });

    // 单次DOM操作更新（Single DOM operation）
    cartItems.appendChild(fragment);
    
    // 更新总价显示（Update total price display）
    totalPriceElement.textContent = `总价 / Total: ¥${total.toFixed(2)}`;
}

/**
 * 清空购物车（Clear shopping cart）
 * 功能说明（Functionality）:
 * 1. 重置内存数据（Reset in-memory data）
 * 2. 清除持久化存储（Clear persistent storage）
 * 3. 触发界面更新（Trigger UI update）
 */
function clearCart() {
    // 重置内存中的购物车（Reset in-memory cart）
    cart = [];
    
    // 清空localStorage（Clear localStorage）
    localStorage.setItem('cart', JSON.stringify(cart));
    
    // 强制更新界面（Force UI update）
    updateCart();
}



/**
 * 菜单点击事件
 */
// 二级菜单显示功能
// 当DOM内容加载完成后执行初始化（Execute after DOM content is loaded）
document.addEventListener('DOMContentLoaded', function() {
    // 通过URL路径判断购物车页面
    if (window.location.pathname.includes('cart.html')) {
        updateCart();
    }

    // 获取所有主菜单项（Get all main menu items）
    const mainMenuItems = document.querySelectorAll('.main-menu li');

    // 为每个菜单项添加鼠标交互事件（Add mouse interaction events for each menu item）
    mainMenuItems.forEach(item => {
        // 鼠标进入时显示子菜单（Show submenu on mouse enter）
        item.addEventListener('mouseenter', () => {
            // 查找子菜单元素（Find submenu element）
            const subMenu = item.querySelector('.sub-menu');
            if (subMenu) {
                // 通过CSS display属性控制可见性（Control visibility via CSS display property）
                subMenu.style.display = 'block';
            }
        });

        // 鼠标离开时隐藏子菜单（Hide submenu on mouse leave）
        item.addEventListener('mouseleave', () => {
            const subMenu = item.querySelector('.sub-menu');
            if (subMenu) {
                // 恢复默认隐藏状态（Revert to default hidden state）
                subMenu.style.display = 'none';
            }
        });
    });
    // 默认显示热卖商品
    renderProducts('热卖');
    
    // 为热卖菜单项添加点击事件
    document.querySelector('.main-menu li:first-child a').addEventListener('click', (e) => {
        e.preventDefault();
        renderProducts('热卖');
    });
  });

  
// 二级菜单点击事件处理程序
// Secondary menu click event handler
document.addEventListener('DOMContentLoaded', () => {
    // 使用事件委托机制监听菜单点击（父元素监听所有子元素事件）
    // Using event delegation to handle menu clicks (parent element listens to all child events)
    document.querySelector('.main-menu').addEventListener('click', (e) => {
        // 通过closest方法检测点击目标是否为<a>标签
        // Detect if click target is <a> tag using closest()
        const link = e.target.closest('a');
        
        // 验证点击元素在子菜单中且是有效链接
        // Verify clicked element is in submenu and valid link
        if (link && link.closest('.sub-menu')) {
            // 获取分类名称并去除空白字符
            // Get category name and trim whitespace
            const category = link.textContent.trim();
            console.log('点击的分类：', category);

            // 商品数据存在性校验（双重验证）
            // Product data existence check (dual verification)
            if (products && products[category]) {
                console.log('对应的商品数据：', products[category]);
            } else {
                // 错误处理：分类数据未找到
                // Error handling: category data not found
                console.error('未找到对应的商品数据');               
            }

            // 阻止默认链接跳转行为
            // Prevent default link navigation behavior
            e.preventDefault();

            // 执行商品列表渲染
            // Execute product list rendering
            renderProducts(category);
        }
    });
});


/**
 * 根据商品分类渲染商品列表到页面
 * Renders product list to page based on category
 * @param {string} category - 商品分类名称/Product category name
 */
function renderProducts(category) {
    const container = document.getElementById('product-display');
    
    if (!products[category] || products[category].length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <p class="no-products">暂未添加商品</p>
            </div>
        `;
        return;
    }

    // 生成带有点击事件的商品模板
    // Generate product template with click events
    container.innerHTML = products[category]
        .map(item => 
            `<div class="product">
                <h3>${item.name}</h3>
                <p>¥${item.price.toFixed(2)}</p>
                <!-- 加入购物车按钮（Add to Cart button） -->
                <button class="add-cart-btn" 
                    onclick="addToCart('${escapeHtml(item.name)}', ${item.price})">
                    加入购物车
                </button>
            </div>`
        ).join('');
}

// HTML特殊字符转义函数（HTML escape function）
function escapeHtml(unsafe) {
    return unsafe.replace(/[&<"'>]/g, match => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    })[match]);
}


// 添加删除事件处理
document.getElementById('cart-items').addEventListener('click', (e) => {
    if (e.target.classList.contains('delete-btn')) {
        const index = parseInt(e.target.dataset.index);
        cart.splice(index, 1);
        localStorage.setItem('cart', JSON.stringify(cart));
        updateCart();
    }
});
